<template>
	<div class="authentication">
		<div class="authenticationHraders flex">
			<span>我的认证</span>
			<!-- addauthentication -->
			<el-button @click="cancelAccountUsers" type="primary">账号注销</el-button>
			<!-- <el-button @click="$router.push('/addresslist/interior/addauthentication')">修改认证</el-button> -->
		</div>
		<div class="authenticationContent">
			<div class="contentHeader">我的基本信息</div>
			<!-- <el-divider content-position="left">我的基本信息</el-divider> -->
			<div class="basicInformation flex">
				<el-form :model="msgForm" class="demo-form-inline" label-width="10rem">
					<el-form-item label="姓名：">
						<el-input v-model="msgForm.name" placeholder="姓名"></el-input>
					</el-form-item>
					<el-form-item label="平台编号：">
						<el-input v-model="msgForm.jobNumber" :disabled="true" placeholder="平台编号"></el-input>
					</el-form-item>
					<el-form-item label="联系电话：">
						<el-input v-model="msgForm.phone" disabled maxlength="11" placeholder="联系电话"></el-input>
					</el-form-item>
				</el-form>
				<div>
					<el-upload class="" ref="uploadHeaderImg" action="" :show-file-list="false" :http-request="upLoadHeadImgFiles">
						<el-image v-if="msgForm.head" :src="msgForm.head?msgForm.head:$globalData.defaultImg" class="avatar avatar-uploader" fit="cover"></el-image>
						<i v-else class="el-icon-plus avatar-uploader-icon avatar-uploader"></i>
						<br v-if="!msgForm.head" />
						<el-button size="small" type="text">上传/更改头像</el-button>
					</el-upload>
				</div>
			</div>
			<div class="contentHeader">身份认证信息</div>
			<div class="basicInformation">
				<el-form :model="msgForm" class="demo-form-inline" label-width="10rem">
					<el-form-item label="身份证号：">
						<el-input v-model="msgForm.cardId" maxlength="18" placeholder="身份证号"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="basicInformation flex" style="padding-left: 10rem;">
				<div>
					<el-upload class="InformationUpload" ref="InformationUpload" action="" title="点击上传/更改图片" :show-file-list="false"
					 :http-request="upLoadCardZFiles">
						<!-- <el-image :src="msgForm.cardFront?msgForm.cardFront:require('@/assets/image/working/front.png')" fit="cover"
						 class="InformationImgs"></el-image> -->
						 <img :src="msgForm.cardFront?msgForm.cardFront:require('@/assets/image/working/front1.png')" class="InformationImgs" alt="">
					</el-upload>
				</div>
				<div>
					<el-upload class="InformationUpload" ref="InformationUpload" action="" title="点击上传/更改图片" :show-file-list="false"
					 :http-request="upLoadCardBFiles">
						<!-- <el-image :src="msgForm.cardReverse?msgForm.cardReverse:require('@/assets/image/working/reverse.png')"
						 fit="cover" class="InformationImgs"></el-image> -->
						 <img :src="msgForm.cardReverse?msgForm.cardReverse:require('@/assets/image/working/reverse1.png')" class="InformationImgs" alt="">
					</el-upload>
				</div>
				<div>
					<el-upload class="InformationUpload" ref="InformationUpload" action="" title="点击上传/更改图片" :show-file-list="false"
					 :http-request="upLoadCardSCFiles">
						<!-- <el-image :src="msgForm.holdingCard?msgForm.holdingCard:require('@/assets/image/working/hand.png')"
						 fit="cover" class="InformationImgs"></el-image> -->
						 <img :src="msgForm.holdingCard?msgForm.holdingCard:require('@/assets/image/working/hand1.png')" class="InformationImgs" alt="">
					</el-upload>
				</div>
			</div>
			<div class="InformationUploadTip">为更好的服务，身份证件仅仅用作验证用户真实性，其他用户不可下载，查看及复制</div>
			<!-- <div class="contentHeader">职级、岗位信息</div> -->
			<div class="contentHeader">岗位信息</div>
			<div class="basicInformation">
				<el-form :model="msgForm" class="demo-form-inline" label-width="10rem">
					<el-form-item label="我的岗位：">
						<div class="customBox flex">
							<el-tag class="isTagList" size=" " v-for="(tag, index) in postDataForm.userPostList" :key="index" closable
							 :disable-transitions="false" @close="deletePostTag(tag)">
								{{tag.labelName}}
							</el-tag>
							<el-button class="button-new-tag" size="" @click="showInput">添加岗位</el-button>
						</div>
					</el-form-item>
					<!-- <el-form-item label="我的职级：">
						<div class="customBox flex">
							<el-tag class="isTagList" size=" " v-if="rankDataListItem || msgForm.rankId" closable :disable-transitions="false" @close="deleteRankTag(rankDataListItem, msgForm.rankId)">
								{{rankDataListItem.departmentName?rankDataListItem.departmentName:msgForm.rankId}}
							</el-tag>
							<el-button class="button-new-tag" size="" @click="showRankInput(rankDataListItem)">{{rankDataListItem?'修改职级':'添加职级'}}</el-button>
						</div>
					</el-form-item> -->
				</el-form>
			</div>
			<!-- <div class="basicInformation flex" style="padding-left: 10rem;">
				<div class="rankPhotos flex">
					<div v-for="(rankPhoto, index) in msgForm.rankNameImg" class="rankPhotosListBox">
						<i class="el-icon-error deleteRankPhoto" title="删除材料" @click="deleteRankPhotos(index)"></i>
						<img :src="rankPhoto?rankPhoto:$globalData.defaultImg" :key="index" class="InformationImgs" alt="">
					</div>
					<el-upload class="InformationUpload" ref="InformationUpload" action="" :show-file-list="false" :http-request="upLoadRankFiles">
						<div class="materials">
							<i class="el-icon-plus avatar-uploader-icon"></i>
							<p>上传职级证明材料</p>
						</div>
					</el-upload>
				</div>
			</div>
			<div class="InformationUploadTip">为更好的服务，材料仅仅用作验证平台用户真实性，仅平台可查看</div> -->
			<div class="contentHeader">我服务的范围</div>
			<div class="basicInformation">
				<el-form :model="addressListData" class="demo-form-inline selectAddressBox" label-width="10rem">
					<el-form-item label="服务范围：">
						
						<div class="allAddressBox flex" v-if="addressListData.isShowAdd" style="justify-content: space-between;">
							<!-- <el-select v-model="addressListData.province" class="selectAddress" placeholder="请选择" @change="selectProvinceData">
								<el-option v-for="provinces in addressListData.provinceList" :label="provinces.name" :value="provinces.id"></el-option>
							</el-select>
							<el-select v-model="addressListData.city" class="selectAddress" placeholder="请选择" @change="selectCityData">
								<el-option v-for="city in addressListData.cityList" :label="city.name" :value="city.id"></el-option>
							</el-select>
							<el-select v-model="addressListData.district" class="selectAddress" placeholder="请选择" @change="selectDistrictData">
								<el-option v-for="district in addressListData.districtList" :label="district.name" :value="district.id"></el-option>
							</el-select>
							<el-select v-model="addressListData.town" class="selectAddress" placeholder="请选择" @change="selectTownData">
								<el-option v-for="town in addressListData.townList" :label="town.name" :value="town.id"></el-option>
							</el-select> -->
							<!-- <div > -->
								<!-- <area-cascader v-model="addressListData.addressData" style="width: 590px;margin-right: 10px;" :key="areaCascaderKey" :data="$pcaa" :level="2" type="text"
								 icon="el-icon-arrow-down" placeholder="请选择地区"></area-cascader> -->
								 <addressD :value='addressData' @getAddressData="getAddressData"></addressD>
							<!-- </div> -->
							
							<el-button class="button-new-tag" style="width: 60px;" size="" @click="cancelAddAddress">取消</el-button>
							<el-button class="button-new-tag" style="width: 60px;" size="" @click="confirmAddAddress">确定</el-button>
						</div>
						<el-button v-else class="button-new-tag" size="" @click="addAddressList">添加地址</el-button>
						<div class="myAddressList" v-cloak
							v-if="addressListData.myAddressListDataName && addressListData.myAddressListDataName.length > 0" 
							v-for="(aaddress, index) in addressListData.myAddressListDataName"
							:key="index"
						>
							<span class="aaddressSpan">{{aaddress}}</span>
							<i class="deleteAddressIcon el-icon-remove-outline" @click="deleteMyAddressData(index)"></i>
						</div>
					</el-form-item>
					
				</el-form>
			</div>
			<div class="submitBtns">
				<el-button @click="$router.back()">返回上一页</el-button>
				<el-button @click="modificationAuthentication" type="primary">提交</el-button>
			</div>
		</div>
		<!-- 添加岗位 -->
		<el-dialog title="添加岗位" :visible.sync="addPostDialog" width="60rem">
		  <div class="addTagDialog">
			  <el-form :model="addPostForm" class="demo-form-inline" label-width="10rem">
				  <el-form-item label="岗位" v-if="addPostForm.isPostId">
					  <div class="flex" style="justify-content: space-between;width: 290px;">
						  <el-select v-model="addPostForm.postId" placeholder="选择岗位" style="">
						    <el-option v-for="item in postDataForm.allPostList" :label="item.labelName" :value="item.id"></el-option>
						  </el-select>
						  <el-button icon="el-icon-edit" type="text" style="margin-left: 10px;" @click="addPostForm.isPostId = false">自定义岗位</el-button>
					  </div>
				  </el-form-item>
			    <el-form-item label="自定义" v-else>
					<div class="flex" style="justify-content: space-between;width: 290px;">
						<el-input v-model="addPostForm.postName" placeholder="自定义岗位"></el-input>
						<el-button type="text" style="margin-left: 10px;" @click="addPostForm.isPostId = true">取消自定义</el-button>
					</div>
			    </el-form-item>
			   
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addPostDialog = false">取 消</el-button>
		    <el-button type="primary" @click="submitAddPost">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 添加职级 -->
		<el-dialog title="添加职级" :visible.sync="addRankDialog" width="60rem">
		  <div class="addTagDialog">
			  <el-form :model="addRankForm" class="demo-form-inline" label-width="10rem">
				  <el-form-item label="职级" v-if="addRankForm.isrankId">
					  <div class="flex" style="justify-content: space-between;width: 290px;">
						  <el-select v-model="addRankForm.labelName" placeholder="选择职级" style="">
						    <el-option v-for="item in rankDataForm.allRankList" :label="item.departmentName" :value="item.departmentName"></el-option>
						  </el-select>
						  <el-button icon="el-icon-edit" type="text" style="margin-left: 10px;" @click="addRankForm.isrankId = false">自定义职级</el-button>
					  </div>
				  </el-form-item>
			    <el-form-item label="自定义" v-else>
					<div class="flex" style="justify-content: space-between;width: 290px;">
						<el-input v-model="addRankForm.inputlabelName" placeholder="自定义职级"></el-input>
						<el-button type="text" style="margin-left: 10px;" @click="addRankForm.isrankId = true">取消自定义</el-button>
					</div>
			    </el-form-item>
			   
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addRankDialog = false">取 消</el-button>
		    <el-button type="primary" @click="submitAddRank">确 定</el-button>
		  </span>
		</el-dialog>
		
		
		
	</div>
</template>

<script>
	import addressD from '@/components/address.vue'
	export default {
		components: {
			addressD
		},
		data() {
			return {
				pageData: '',
				msgForm: {
					id: '', // 用户审核信息Id
					cardId: '', // 身份证号
					jobNumber: '', // 平台编号
					cardFront: '', // 身份证正面图
					cardReverse: '', // 身份证反面图
					holdingCard: '', // 手持身份证
					name: '', // 姓名
					head: '', // 用户头像
					// headBinary: '', // 用户头像:Binary
					phone: '', // 用户账号:登录用的账号
					areaEntityList: [], // 服务范围-------服务地址Id数组
					rankId: '', // 职级名称
					// addAreaEntityList: new Map(), // 服务范围-------服务地址Id数组
					rankNameImg: [],
					// --------------------------------------------------------------------
					// 用户选择岗位数据
					postListData: '',
					// 用户选择职级数据
					rankListData: ''
				},
				// 职级数据处理
				rankDataListItem: '',
				
				
				// 入职信息
				// entryMsg: {
				// 	tableData: []
				// },
				userId: '',
				authenticationDetail: '',
				postDataForm: {
					// 公司所有岗位列表
					allPostList: '',
					// 用户岗位列表
					userPostList: [],
					// 岗位筛选结果
					options: [],
					selectPostList: false,
					loading: false
				},
				rankDataForm: {
					// 公司所有职级列表
					allRankList: '',
					// 用户职级列表
					userRankList: '',
					// 职级筛选结果
					RankoPtions: [],
					selectRankList: false,
					RankLoading: false,
					rankPhotos: '', // 职级图片(Base64字符串数组)
					rankPhotosMap: new Map(),
					rankPhotosBinaryMap: new Map(),
					rankPhotosList: []
				},
				// 地址四级联动
				addressData:[],
				addressListData: {
					// province: '', // 省
					// provinceList: '', // 省数据
					// city: '', // 市
					// cityList: '', // 市数据
					// district: '', // 区/县
					// districtList: '', // 区/县数据
					// town: '', // 镇
					// townList: '', // 镇数据
					addressData: '',
					isShowAdd: false,
					// myAddressListDataId: [], //已有和添加的数据ID
					myAddressListDataName: []
				},
				// 添加岗位弹窗
				addPostDialog: false,
				addPostForm: {
					postId: '',
					postName: '',
					isPostId: true
				},
				// 添加职级弹窗
				addRankDialog: false,
				addRankForm: {
					labelName: '',
					inputlabelName: '',
					isrankId: true
				},
				areaCascader: '', // 地址选择器时候显示下拉框
				areaCascaderKey: new Date().getTime()
			}
		},
		created() {
			// 页面始化设置左边导航栏状态
			this.$store.commit('set_myManagementNavIndex', 14)
			// console.log(window)
		},
		computed:{
			
		},
		watch:{
			areaCascader(newData){
				// console.log(a, 111)
				if(!newData && !this.addressListData.addressData){
					this.areaCascaderKey = new Date().getTime()
				}
			},
			addPostDialog(newData){
				// 添加岗位弹窗监听
				if(newData){
					this.addPostForm.postId = ''
					this.addPostForm.postName = ''
					this.addPostForm.isPostId = true
				}
			},
			addRankDialog(newData){
				// 添加职级弹窗监听
				if(newData){
					this.addRankForm.labelName = ''
					this.addRankForm.inputlabelName = ''
					this.addRankForm.isrankId = true
				}
			}
		},
		mounted() {
			this.userId = this.$store.state.user.userInfo.id
			this.msgForm.name = this.$store.state.user.userInfo.name
			this.msgForm.phone = this.$store.state.user.userInfo.phone
			// console.log(this.$store.state.user.userInfo.id)
			this.getAuthenticationDetail()
			// 获取岗位
			this.getPostList()
			this.getAllPostByUserIdList()
			// 获取用户职级
			this.getRankName()
			// 获取地址---服务范围
			// this.getProvinceData()
		},
		methods: {
			getAddressData(e){
				console.log(e);
				this.addressListData.addressData = e.text
			},
			areacascaderclick(e){
				// if(!this.addressListData.addressData){
				// 	return
				// }
				// this.addressListData.addressData.forEach((v)=>{
				// 	console.log(v)
				// })
				// console.log(this.addressListData.addressData)
			},
			modificationAuthentication() {
				// 修改认证
				let postData = this.msgForm
				// console.log(this.addressListData.myAddressListDataId)
				// if(this.addressListData.myAddressListDataName.length > 0){
				// 	this.addressListData.myAddressListDataName.forEach((v, i) => {
				// 		// console.log(v.join(','))
				// 		// console.log(i)
				// 		this.msgForm.areaEntityList.push(v)
				// 	})
				// }
				this.msgForm.areaEntityList = this.addressListData.myAddressListDataName
				// console.log(this.msgForm)
				// return
				let reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/
				if(!postData.name){
					this.$message.error("姓名不能为空")
					return
				}else if(!postData.cardId || !reg.test(postData.cardId)){
					this.$message.error("身份证不合法")
					return
				} else if(!postData.cardFront){
					this.$message.error("请上传身份证正面图像")
					return
				} else if(!postData.cardReverse){
					this.$message.error("请上传身份证反面图像")
					return
				} else if(!postData.holdingCard){
					this.$message.error("请上传手持身份证图像")
					return
				} else if(postData.areaEntityList.length < 0){
					this.$message.error("请添加服务地址")
					return
				}
				this.$request.postForm(this.$api.submitAuthenticate, this.msgForm).then(res => {
					if (res.code == 200) {
						this.$message.success('修改成功')
						// this.getAuthenticationDetail()
						setTimeout(()=>{
							this.$router.back()
						},300)
					}
				})
			},
			deletePostTag(tag) {
				// 删除岗位标签
				this.$confirm('确定要删除该岗位吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.removePost, {
						userId: this.userId,
						postId: tag.id
					}).then(res => {
						if (res.code == 200) {
							// this.$message.success('删除成功')
							this.getAllPostByUserIdList()
						}
					})
				})
			},
			deleteRankTag(tag, page) {
				// 删除职级标签
				this.$confirm('确定要删除该职级吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (tag) {
						this.$request.postForm(this.$api.removeRankName, {
							userId: this.userId,
							rankId: tag.id
						}).then(res => {
							if (res.code == 200) {
								this.rankDataListItem = ''
								this.msgForm.rankId = ''
								this.getAuthenticationDetail()
							}
						})
					} else {
						this.rankDataForm.userRankList = ''
						this.msgForm.rankId = ''
						// this.$message.success('删除成功')
					}
				})
			},
			showInput() {
				// 切换岗位新增
				// this.postDataForm.selectPostList = true
				this.addPostDialog = true
			},
			showRankInput(obj) {
				// 切换职级新增
				if (this.msgForm.rankId == '' || this.msgForm.rankId == null) {
					// this.rankDataForm.selectRankList = true
					this.addRankDialog = true
				} else {
					this.$message.error('请先删除已有直接再进行添加')
				}
			},
			addAddressList() {
				// 添加地址
				this.addressListData.isShowAdd = true
				this.$forceUpdate()
			},
			cancelAddAddress() {
				// 取消添加地址
				this.addressListData.addressData = ''
				// this.addressListData.province = ''
				// this.addressListData.city = ''
				// this.addressListData.cityList = ''
				// this.addressListData.district = ''
				// this.addressListData.districtList = ''
				// this.addressListData.town = ''
				// this.addressListData.townList = ''
				this.addressListData.isShowAdd = false
			},
			submitAddPost(){
				// 选择岗位
				if(!this.addPostForm.postId && !this.addPostForm.postName){
					this.$message.error('请先选择岗位')
					return
				}
				if(this.addPostForm.isPostId){
					let postData = {
						userId: this.userId,
						postId: this.addPostForm.postId
					}
					this.$request.postForm(this.$api.newPostUser, postData).then(res => {
						if (res.code == 200) {
							this.getAllPostByUserIdList()
							this.addPostDialog = false
						}
					})
				} else {
					let postData = {
						userId: this.userId,
						labelName: this.addPostForm.postName
					}
					this.$request.postForm(this.$api.newPostCustomLabel, postData).then(res => {
						if (res.code == 200) {
							this.getAllPostByUserIdList()
							this.addPostDialog = false
						}
					})
				}
			},
			// selectPostListItem(e) {
			// 	// 选择岗位
			// 	if (e.indexOf(',') >= 0) {
			// 		// 数据中选择
			// 		this.msgForm.postListData = ''
			// 		this.$request.postForm(this.$api.newPostUser, {
			// 			userId: this.userId,
			// 			postId: e.split(',')[0]
			// 		}).then(res => {
			// 			if (res.code == 200) {
			// 				// this.$message.success('添加成功')
			// 				this.getAllPostByUserIdList()
			// 			}
			// 		})
			// 	} else {
			// 		// 自定义
			// 		this.$request.postForm(this.$api.newPostCustomLabel, {
			// 			userId: this.userId,
			// 			labelName: e
			// 		}).then(res => {
			// 			if (res.code == 200) {
			// 				// this.$message.success('添加成功')
			// 				this.getAllPostByUserIdList()
			// 			}
			// 		})
			// 	}
			// 	this.postDataForm.selectPostList = false
			// },
			submitAddRank(){
				// 选择职级
				// addRankForm: {
				// 	labelName: '',
				// 	inputlabelName: '',
				// 	isrankId: true
				// },
				if(this.addRankForm.labelName == '' && this.addRankForm.inputlabelName == ''){
					this.$message.error('请先选择职级')
					return
				}
				if(this.addRankForm.isrankId){
					this.rankDataForm.userRankList = this.addRankForm.labelName
					this.msgForm.rankId = this.addRankForm.labelName
				} else{
					this.rankDataForm.userRankList = this.addRankForm.inputlabelName
					this.msgForm.rankId = this.addRankForm.inputlabelName
				}
				this.addRankDialog = false
				
				
			},
			// selectRankListItem(e) {
			// 	// 选择职级
			// 	if (e.indexOf(',') >= 0) {
			// 		// 数据中选择
			// 		this.rankDataForm.userRankList = e.split(',')[1]
			// 		this.msgForm.rankId = e.split(',')[1]
			// 	} else {
			// 		// 自定义
			// 		this.rankDataForm.userRankList = e
			// 		this.msgForm.rankId = e
			// 	}
			// 	console.log(this.msgForm.rankId)
			// 	this.rankDataForm.selectRankList = false
			// },
			// remoteMethod(query) {
			// 	// 添加岗位搜索框
			// 	if (query !== '') {
			// 		this.postDataForm.loading = true;
			// 		setTimeout(() => {
			// 			this.postDataForm.loading = false;
			// 			this.postDataForm.options = this.postDataForm.allPostList.filter(item => {
			// 				return item.labelName.toLowerCase()
			// 					.indexOf(query.toLowerCase()) > -1;
			// 			});
			// 		}, 200);
			// 	} else {
			// 		this.postDataForm.options = [];
			// 	}
			// },
			// remoteRankMethod(query) {
			// 	// 添加职级搜索框
			// 	if (query !== '') {
			// 		this.rankDataForm.RankLoading = true;
			// 		setTimeout(() => {
			// 			this.rankDataForm.RankLoading = false;
			// 			this.rankDataForm.RankoPtions = this.rankDataForm.allRankList.filter(item => {
			// 				return item.departmentName.toLowerCase()
			// 					.indexOf(query.toLowerCase()) > -1;
			// 			});
			// 		}, 200);
			// 	} else {
			// 		this.rankDataForm.RankoPtions = [];
			// 	}
			// },
			getAuthenticationDetail() {
				// 获取用户认证信息
				this.$request.postForm(this.$api.getDetails, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						this.authenticationDetail = res.data
						this.msgForm.id = this.pageData.id// 用户审核信息Id
						this.msgForm.cardId = this.pageData.cardId// 身份证号
						this.msgForm.jobNumber = this.pageData.jobNumber// 平台编号
						this.msgForm.cardFront = this.pageData.cardFront// 身份证正面图
						this.msgForm.cardReverse = this.pageData.cardReverse// 身份证反面图
						this.msgForm.holdingCard = this.pageData.holdingCard// 手持身份证
						this.msgForm.name = this.pageData.name// 姓名
						this.msgForm.head = this.pageData.head// 用户头像
						this.msgForm.phone = this.pageData.phone// 用户账号
						// this.msgForm.areaEntityList = this.pageData.areaEntityList// 服务范围
						// 职级图片
						if(this.pageData.rankNameEntityList && this.pageData.rankNameEntityList != null){
							// 职级渲染
							this.rankDataListItem = this.pageData.rankNameEntityList
							this.msgForm.rankId = this.pageData.rankNameEntityList.departmentName// 职级名称
							this.pageData.rankNameEntityList.rankPhotosEntityList.forEach((v)=>{
								this.msgForm.rankNameImg.push(v.picture)
							})
						} else {
							this.msgForm.rankNameImg = []
							this.msgForm.rankId = ''// 职级名称
						}
						// console.log(this.msgForm.rankNameImg)
						
						// 地址信息----先清空地址数据
						
						this.addressListData.myAddressListDataName = []
						this.pageData.areaEntityList.forEach((v, i)=>{
							// console.log(v)
							this.addressListData.myAddressListDataName.push(v.addressId)
						})
						// this.addressListData.myAddressListDataId = []
						// let addressArryData = this.authenticationDetail.areaEntityList
						// addressArryData.forEach((v, i) => {
						// 	this.addressListData.myAddressListDataId.push(v.addressId.split(','))
						// 	let addressListDataText = []
						// 	v.addressId.split(',').forEach((n, s) => {
						// 		setTimeout(() => {
						// 			this.useIdQueryAddress(n, (text) => {
						// 				addressListDataText.push(text)
						// 			})
						// 		}, s * 100)
						// 	})
						// 	this.addressListData.myAddressListDataName.push(addressListDataText)
						// })
					}
				})
			},
			getPostList() {
				// 获取公司所有岗位列表
				this.$request.get(this.$api.getPost).then(res => {
					if (res.code == 200) {
						this.postDataForm.allPostList = res.data.post
						this.postDataForm.allPostList = this.postDataForm.allPostList.concat(res.data.postCus)
					}
				})
			},

			getRankName() {
				// 获取职级列表
				this.$request.postForm(this.$api.getRankName).then(res => {
					if (res.code == 200) {
						this.rankDataForm.allRankList = res.data
					}
				})
			},
			getAllPostByUserIdList() {
				// 获取用户所有岗位
				this.$request.postForm(this.$api.getAllPostByUserId, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						this.postDataForm.userPostList = res.data
					}
				})
			},
			// getProvinceData() {
			// 	// 获取省数据
			// 	this.getAllAddressList('', (province) => {
			// 		this.addressListData.provinceList = province
			// 	})
			// },
			// getAllAddressList(id = '', callBack) {
			// 	// 获取所有地址信息
			// 	this.$request.postForm(this.$api.getAllAddress, {
			// 		pid: id
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			callBack(res.data)
			// 		}
			// 	})
			// },
			// selectProvinceData(id) {
			// 	// 选择省数据清空后面所有选择框数据
			// 	this.addressListData.city = ''
			// 	this.addressListData.cityList = ''
			// 	this.addressListData.district = ''
			// 	this.addressListData.districtList = ''
			// 	this.addressListData.town = ''
			// 	this.addressListData.townList = ''
			// 	// 获取市数据
			// 	this.getAllAddressList(id, (city) => {
			// 		this.addressListData.cityList = city
			// 		this.msgForm.addAreaEntityList.set('1', id)
			// 		this.msgForm.addAreaEntityList.delete('2')
			// 		this.msgForm.addAreaEntityList.delete('3')
			// 		this.msgForm.addAreaEntityList.delete('4')
			// 	})
			// },
			// selectCityData(id) {
			// 	// 选择市数据清空后面所有选择框数据
			// 	this.addressListData.district = ''
			// 	this.addressListData.districtList = ''
			// 	this.addressListData.town = ''
			// 	this.addressListData.townList = ''
			// 	// 获取区/县数据
			// 	this.getAllAddressList(id, (district) => {
			// 		this.addressListData.districtList = district
			// 		this.msgForm.addAreaEntityList.set('2', id)
			// 		this.msgForm.addAreaEntityList.delete('3')
			// 		this.msgForm.addAreaEntityList.delete('4')
			// 	})
			// },
			// selectDistrictData(id) {
			// 	// 选择区/县数据清空后面所有选择框数据
			// 	this.addressListData.town = ''
			// 	this.addressListData.townList = ''
			// 	// 获取镇数据
			// 	this.getAllAddressList(id, (town) => {
			// 		this.addressListData.townList = town
			// 		this.msgForm.addAreaEntityList.set('3', id)
			// 		this.msgForm.addAreaEntityList.delete('4')
			// 	})
			// },
			// selectTownData(id) {
			// 	// 选择镇数据,,组合数据
			// 	this.msgForm.addAreaEntityList.set('4', id)
			// },
			confirmAddAddress() {
				// 确定添加地址
				if (this.addressListData.addressData == '') {
					this.$message.error('请选择地址')
					this.addressListData.addressData = ''
					return
				} else {
					let addressText = this.addressListData.addressData
					if(this.addressListData.myAddressListDataName.length > 0){
						for(let i in this.addressListData.myAddressListDataName){
							if(this.addressListData.myAddressListDataName[i] == addressText){
								this.$message.error('请勿重复添加已有地址')
								this.addressListData.addressData = ''
								return
							}
						}
						this.addressListData.myAddressListDataName.push(addressText)
					} else {
						this.addressListData.myAddressListDataName.push(addressText)
					}
					console.log(this.addressListData.myAddressListDataName)
					
					this.cancelAddAddress()
				}
			},
			deleteMyAddressData(i) {
				// 删除地址
				// console.log(i, this.addressListData.myAddressListDataName, this.addressListData.myAddressListDataId)
				// return
				this.$confirm('确定要删除该地址吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.addressListData.myAddressListDataName.splice(i, 1)
					this.addressListData.addressData = ''
					console.log(this.addressListData.myAddressListDataName)
					// this.addressListData.myAddressListDataId.splice(i, 1)
					// console.log(this.addressListData.myAddressListDataId)
					// this.$message.success('删除成功')
				})
			},
			// useIdQueryAddress(id, callBack) {
			// 	// 使用id查询地址
			// 	this.$request.postForm(this.$api.getAddressName, {
			// 		id: id
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			if(res.data){
			// 				callBack(res.data.name)
			// 			} else {
			// 				callBack(null)
			// 			}
			// 		}
			// 	})
			// },
			upLoadHeadImgFiles(file) {
				// 上传头像
				this.upLoadFiles(file, 'head', (url) => {
					this.msgForm.head = url
				})
			},
			upLoadCardZFiles(file) {
				// 上传身份证正面
				this.upLoadFiles(file, 'cardId', (url) => {
					this.msgForm.cardFront = url
				})
			},
			upLoadCardBFiles(file) {
				// 上传身份证背面
				this.upLoadFiles(file, 'cardId', (url) => {
					this.msgForm.cardReverse = url
				})
			},
			upLoadCardSCFiles(file) {
				// 上传手持身份证照片
				this.upLoadFiles(file, 'cardId', (url) => {
					this.msgForm.holdingCard = url
				})
			},
			upLoadRankFiles(file) {
				// 上传职级照片
				this.upLoadFiles(file, 'rankName', (url) => {
					this.msgForm.rankNameImg.push(url)
				})
			},
			deleteRankPhotos(i) {
				// 删除职级照片
				this.$confirm('确定要删除该职级照片吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.msgForm.rankNameImg.splice(i, 1)
				})
			},
			upLoadFiles(file, type, callBack) {
				let File = file.file
				let fileSize = 1024 * 1024 * 2 // 限制大小2MB
				if (File.size > fileSize || File.type != 'image/jpeg') {
					this.$message.error('上传图片大小不能大于2M，且必须为jpg格式')
					return
				}
				let formData = new FormData()
				formData.append('identifier', type)
				formData.append('file', File)
				this.$request.uploading(this.$api.uploadImg, formData).then(res=>{
					if(res.code == 200){
						callBack(res.data)
					}
				})
			},
			cancelAccountUsers() {
				// 注销账户
				let store = this.$store.state.user
				this.$confirm('此操作将注销当前账户且不可恢复, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.cancelAccountSms, {
						phone: store.userInfo.phone,
						userId: this.userId
					}).then(res => {
						this.$prompt('请输入短信验证码', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputPattern: /^\d{4}$/,
							inputErrorMessage: '验证码不正确'
						}).then(({
							value
						}) => {
							this.$request.postForm(this.$api.cancelAccount,{
								phone: store.userInfo.phone,
								userId: this.userId,
								verificationCode: value
							}).then(res=>{
								this.$message.success('账号已注销')
								setTimeout(()=>{
									// 清空所有缓存并退出webSocket
									webSocket.webSocketClose()
									sessionStorage.clear()
									this.$router.replace('/login')
									// 强制刷新页面
									window.location.reload();
								},300)
							})
							
						})
					})
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.authenticationHraders {
		padding: 10px 20px;
		background: #FFFFFF;
		border-bottom: 1px solid #DCDCDC;
		justify-content: space-between;
		align-items: center;
	}

	.flex {
		display: flex;
		flex-wrap: nowrap;
	}

	.authenticationHraders span {
		color: #131313;
		font-size: 20px;
	}

	.authenticationContent {
		padding: 20px;
		background: #FFFFFF;
	}

	/* .contentHeader {
		color: #333333;
		font-size: 16px;
		position: relative;
		width: 115px;
		text-align: right;
	}

	.contentHeader::after {
		content: '';
		width: 715px;
		top: 50%;
		border-bottom: 1px dotted #DCDCDC;
		position: absolute;
		left: 135px;
	} */
.contentHeader{
		width: 100%;
		padding: 10px 20px;
		color: #333333;
		font-size: 16px;
		background: #F3F3F3;
		margin-bottom: 20px;
	}
	.basicInformation {
		justify-content: space-between;
		margin-top: 25px;
	}

	.rankPhotos {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.rankPhotosListBox {
		margin-right: 15px;
		position: relative;
	}

	.deleteRankPhoto {
		color: darkred;
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 5;
		font-size: 24px;
		cursor: pointer;
		background: #fff;
		border-radius: 100%;
	}

	.demo-form-inline {
		width: 65%;
	}

	.basicInformation>>>.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader {
		border: 1px dotted #DCDCDC;
		border-radius: 5px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	.InformationImgs {
		width: 210px;
		height: 138px;
		border-radius: 10px;
		border: 1px dotted #DCDCDC;
		overflow: hidden;
	}

	.InformationUploadTip {
		padding-left: 10rem;
		color: #AAAAAA;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 60px;
	}

	.materials {
		width: 210px;
		height: 138px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		border: 1px solid #DCDCDC;
	}

	.materials .avatar-uploader-icon {
		width: 100%;
		height: 50px;
	}

	.materials p {
		width: 100%;
		color: #AAAAAA;
		font-size: 12px;
	}

	.entryRecord {
		margin-top: 30px;
		padding-left: 180px;
	}

	.isTagList {
		margin-right: 10px;
	}

	.allAddressBox {
		justify-content: space-between;
		flex-wrap: nowrap;
		width: 675px;
	}

	.allAddressBox .el-select {
		margin-right: 10px;
		width: 300px;
	}

	.customBox {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 670px;
	}

	.isTagList,
	.button-new-tag {
		margin-bottom: 10px;
	}
	/* .button-new-tag {
		width: 60px;
	} */
	.selectAddressBox>>>.el-select{
		width: 140px;
	}
	.myAddressList {
		color: #606266;
		width: 680px;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		margin-bottom: 10px;
		padding: 0 10px;
		font-size: 12px;
		position: relative;
	}

	.deleteAddressIcon {
		color: darkred;
		cursor: pointer;
		font-size: 14px;
		position: absolute;
		top: 10px;
		right: 10px;
		bottom: 10px;
		margin: auto;
	}

	.aaddressSpan {
		position: relative;
		padding-left: 10px;
		margin-left: 8px;
	}

	.aaddressSpan::before {
		position: absolute;
		content: '/';
		left: 0;
		color: #606266;
	}

	.aaddressSpan:first-child {
		padding-left: 0;
		margin-left: 0;
	}

	.aaddressSpan:first-child::before {
		display: none;
	}
	.submitBtns{
		width: 100%;
		text-align: center;
		margin-top: 160px;
	}
</style>
